<script setup lang="ts">
import { h } from 'vue';
import { useRouter } from 'vue-router';
import { NCard, NButton, NFlex, NDropdown, NTabs, NTabPane, NMessageProvider } from 'naive-ui'
import SvgIcon from '@/components/SvgIcon.vue'
import ComponentsInitialUserForm from '@/components/ComponentsInitialUserForm.vue'
import ComponentsUserSetting from '@/components/ComponentsUserSetting.vue';
import { useCounterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';
const router = useRouter()
const emit = defineEmits(['select'])
const counterStore = useCounterStore()
const { isInitialUser } = storeToRefs(counterStore)
/**
 * 头图标名称设置
 * 头标下拉菜单设置
 */
const options_main = [
    { label: '高级设置', key: '设置' },
]
const mainSelect = (key: string) => {
    console.log(key)
    emit('select', key)
}


let mainIcon = () => {
    return h(NFlex, () => [h(NDropdown, { trigger: "hover", size: "huge", showArrow: true, options: options_main, onSelect: mainSelect }, () => h(NButton, { text: true, style: 'font-size: 24px' }, () => h(SvgIcon, { iconClass: 'params' }))), h('div', '我的设置')])
}
const header_main = () => mainIcon()


/**
 * 关闭事件,返回路由上一页
 */
const handleClose = () => {
    console.log('关闭不了这个应用')
    router.go(-1)
}


</script>
<template>
    <n-card :title="header_main" style="height: 100%;" closable @close="handleClose">
        <template #header-extra>
            <slot name="header-extra"></slot>
        </template>
        <template #default>
            <n-flex vertical>
                <n-tabs placement="left" animated default-value="a" type="card" style="width: 100%;  border: 1px solid #eee;">
                    <n-tab-pane name="a" tab="基础" class="pane" style="text-align: center;">
                        <div class="settingArea">
                            <n-message-provider > 
                                <ComponentsInitialUserForm v-if="isInitialUser"/>
                                <ComponentsUserSetting v-else/>
                            </n-message-provider>
                        </div>
                    </n-tab-pane>
                    <n-tab-pane name="b" tab="辅助" class="pane">
                    </n-tab-pane>
                    <n-tab-pane name="c" tab="消息" class="pane">
                    </n-tab-pane>
                    <n-tab-pane name="d" tab="其它" class="pane">
                    </n-tab-pane>
                </n-tabs>

            </n-flex>

        </template>

        <template #action>
            <slot name="action"></slot>
        </template>
    </n-card>

</template>
<style scoped >

.pane {
    height: calc(100vh - 210px);
    overflow-y: hidden;
}
.settingArea {
    margin-top: 30px;
    width: 550px;
    display: inline-block;
    height: 600px;
    overflow-y: auto;
    padding-right: 30px;
}
.settingArea::-webkit-scrollbar {  
    /* 滚动条的宽度 */
    width: 8px;
}
.settingArea::-webkit-scrollbar-track {  
    background: #f6f6f6;  /* 轨道颜色 */  
}  
/* 滚动条滑块 */  
.settingArea::-webkit-scrollbar-thumb {  
    background: #eee;  /* 滑块颜色 */  
    border-radius: 4px;  /* 滑块圆角 */  
}  
</style>